<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.wondersgroup.wssip.tag.check.KeyValue"%>
<%
	List<KeyValue> dyncData = new ArrayList<KeyValue>();
	KeyValue kv1 = new KeyValue();
	kv1.setKey("1");
	kv1.setValue("企业养老");
	dyncData.add(kv1);
	
	KeyValue kv2 = new KeyValue();
	kv2.setKey("2");
	kv2.setValue("企业工伤");
	dyncData.add(kv2);
	
	KeyValue kv3 = new KeyValue();
	kv3.setKey("3");
	kv3.setValue("企业生育");
	dyncData.add(kv3);
	
	KeyValue kv4 = new KeyValue();
	kv4.setKey("4");
	kv4.setValue("职业年薪");
	dyncData.add(kv4);
	
	KeyValue kv5 = new KeyValue();
	kv5.setKey("5");
	kv5.setValue("机关养老");
	dyncData.add(kv5);
	
	KeyValue kv6 = new KeyValue();
	kv6.setKey("6");
	kv6.setValue("机关工伤");
	dyncData.add(kv6);
	
	KeyValue kv7 = new KeyValue();
	kv7.setKey("7");
	kv7.setValue("机关生育");
	dyncData.add(kv7);
	request.setAttribute("dyncData",dyncData);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>单选框</title>
		<cw:base></cw:base>
		<script type="text/javascript">
			function onEnableSex3() {
				Ext.getCmp('sex3').childItems.each(function(item) {
					item.enable();
				});
			}
			
			function onDisableSex3() {
				Ext.getCmp('sex3').childItems.each(function(item) {
					item.disable();
				});
			}
		</script>
	</head>
	<body>
		<ul>
			<li>
				<b> 单选输入域，通过type=radio渲染成单选，通过checkboxGroup设置一组单选 </b>
			</li>
			<li>
				<b> 数据来源：静态数据、远程加载数据（需要设置url） </b>
			</li>
		</ul>
		<br />
		<ul>
			<li>
				本地数据单选框，设置type为radio，包含checkbox标签（子选项不需要设置type，默认为父标签的type）
				<table>
					<tr>
						<td align="right">
							性别：
						</td>
						<td>
							<cw:checkboxGroup id="sex1" property="sex1" type="radio">
								<cw:checkbox text="男" inputValue="1" checked="true" disabled="true"/>
								<cw:checkbox text="女" inputValue="2" />
							</cw:checkboxGroup>
						</td>
					</tr>
				</table>
				<br />
			</li>
			<li>
				本地数据单选框，设置type为radio，选项数据来源通过dataFields和data设置，dataFields为数据字段名称，data为数据值
				<table>
					<tr>
						<td align="right">
							性别：
						</td>
						<td>
							<cw:checkboxGroup id="sex2" property="sex2" type="radio" displayField="name" valueField="value"
								dataFields="['name','value','checked','disabled']" data="[['男','1',true,false],['女','2',false,false]]">
							</cw:checkboxGroup>
						</td>
					</tr>
				</table>
				<br />
			</li>
			<li>
				远程数据单选框，设置type为radio，设置url为远程加载URL
				<table>
					<tr>
						<td align="right">
							性别：
						</td>
						<td>
							<cw:checkboxGroup id="sex3" property="sex3" type="radio" displayField="name" valueField="value" url="${pageContext.request.contextPath}/sample/component/demoform/radio.json">
							</cw:checkboxGroup>
						</td>
						<td>
							<cw:button text="启用" onclick="onEnableSex3()"></cw:button>
						</td>
						<td>
							<cw:button text="禁用" onclick="onDisableSex3()"></cw:button>
						</td>
					</tr>
				</table>
				<br />
			</li>
			<li>
				远程数据单选框，设置type为radio，设置url为远程加载URL
				<cw:form>
				<table>
					<tr>
						<td align="right">
							性别：
						</td>
						<td>
							<cw:checkboxGroup id="sex4" property="sex4" type="radio" displayField="name" valueField="value" url="${pageContext.request.contextPath}/demoform/loadRadioBoxData.action">
							</cw:checkboxGroup>
						</td>
					</tr>
					<tr>
						<td align="right">
							保险类型：
						</td>
						<td id="dync_td" width="500">
							<tags:dyncRadiobox id="dync" property="dync" data="${dyncData}" row="4" value="1" readOnly="false" label="保险类型"/>
						</td>
					</tr>
				</table>
				</cw:form>
			</li>
		</ul>
		<cw:theme></cw:theme>
		<script type="text/javascript">
			Ext.onReady(function(){
				var dync_td=document.getElementById('dync_td');
				if(dync_td.attachEvent){
					dync_td.attachEvent('onclick',onCheckboxClickFunction_dync);
				}else{
					dync_td.addEventListener("click",onCheckboxClickFunction_dync);
				}
				function onCheckboxClickFunction_dync(event){
					event=event || window.event;
					var target=event.target || event.srcElement;
					if(Ext.getCmp(target.id).readOnly){
						for(var i=0;i<document.getElementsByName("dync").length;i++){
							if(Ext.getCmp("dync_"+i).inputValue=="${dync}"){
								Ext.getCmp("dync_"+i).setValue(true);
								break;
							}
						}
					}
				}
				resetHeight("radioBoxFrame");
			})
		
			function resetHeight(frame) {
				var ifm = parent.document.getElementById(frame);
				var obj = document.body;
				var oStyle = obj.currentStyle? obj.currentStyle : window.getComputedStyle(obj, false);
				var initHeight = parseInt(document.body.clientHeight+parseInt(oStyle["margin-top"])+parseInt(oStyle["margin-bottom"]));
				ifm.height = parseInt(initHeight);
			}
		</script>
	</body>
</html>
